<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: wjk
 * @LastEditTime: 2019-12-31 15:51:20
 * @description: file content
 -->
<template>
  <base-page-view class-name="page-container pdd_order">
    <view class="pdd_order_head">
      <view v-for="(headItem,index) in orderHead" :key="index" class="tab-item" :class="{active:active==index}" @click="toggle(index)">{{ headItem }}
        <view v-if="active===index" class="tab_border"></view>
      </view>
    </view>
    <view v-for="(item,index) in list" :key="index" class="pdd_order_card">
      <view class="pdd_order_card_top">
        <view class="card_top_type">{{ item.orderType }}</view>
        <view>下单时间：{{ item.tradeCreateTime }}</view>
      </view>
      <view class="pdd_order_details">
        <image :src="item.imageUrl" class="details_icon" mode="aspectFit" />
        <view class="details_info">
          <view>订单号:{{ item.tid }}</view>
          <view>订单金额：￥{{ item.payment }}</view>
          <view class="details_info_commisson">返{{ item.selfPrepareCommission | formatMoney }}元</view>
        </view>
        <view class="details_tips">收货后次月25日结算</view>
      </view>
    </view>
    <view v-if="list.length<1" class="empty_view">
      <img src="../images/empty_collect.png" class="empty_img" />
      <view class="tit">暂无相关订单信息</view>
    </view>
    <view v-if="nomore&&list.length>0" class="nomore">暂无更多数据~</view>
  </base-page-view>
</template>

<script>
import './index.scss'

export default {
  components: {
  },
  data() {
    return {
      active: 0,
      orderHead: ['全部', '已付款', '已收货', '已结算', '已失效'],
      platformTitleObj: {
        PDD: '拼多多订单',
        JD: '京东订单',
        VOP: '唯品会订单'
      },
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        platform: 'PDD',
        tradeStatus: '',
        userId: this.$store.state.userInfo.uid
      },
      list: [],
      nomore: false
    }
  },
  created() {
  },
  onLoad(option) {
    if (this.listQuery.platform) {
      this.listQuery.platform = option.platform
      this.$setNavTitle(this.platformTitleObj[option.platform])
    }
    this.getList()
  },
  onShow() {
  },
  onPullDownRefresh() {
    this.listQuery.pageNum = 1
    this.list = []
    this.nomore = false
    this.getList()
  },
  onReachBottom() {
    if (this.nomore) return
    this.listQuery.pageNum += 1
    this.getList()
  },
  methods: {
    toggle(index) {
      this.nomore = false
      this.list = []
      this.active = index
      if (index === 0) {
        this.listQuery.tradeStatus = ''
      } else if (index === 1) {
        this.listQuery.tradeStatus = 'TRADE_PAY'
      } else if (index === 2) {
        this.listQuery.tradeStatus = 'TRADE_SUCCESS'
      } else if (index === 3) {
        this.listQuery.tradeStatus = 'TRADE_EARNING'
      } else if (index === 4) {
        this.listQuery.tradeStatus = 'TRADE_INVALID'
      }
      this.listQuery.pageNum = 1
      this.getList()
    },
    async getList() {
      const query = this.listQuery
      if (this.active === 0) {
        delete query.tradeStatus
      }
      const res = await this.$api.commissionApi.getTradeList(query)
      if (res.code === '000000') {
        setTimeout(function() {
          uni.stopPullDownRefresh()
        }, 500)
        this.list = this.list.concat(res.data.list)
        if (res.data.list.length < this.listQuery.pageSize) {
          this.nomore = true
        }
      } else {
        this.list = []
      }
    }
  }
}
</script>
